<template>
  <div>
    <bread-crumb :crumb="crumb"></bread-crumb>
    <el-card>
      <el-form
        :model="createNewPageForm"
        :rules="createNewPageFormRules"
        ref="createNewPageFormRef"
        label-width="100px"
      >
        <el-form-item label="页面名称" prop="pageName">
          <el-input v-model="createNewPageForm.pageName"></el-input>
        </el-form-item>
        <el-form-item label="所属项目" prop="projectName">
          <el-input v-model="createNewPageForm.projectName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">去编辑页面</el-button>
          <el-button type="info" @click="resetCreateNewPageForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import breadCrumb from '../../components/common/Breadcrumb'
export default {
  name: 'createnewpage',
  components: {
    breadCrumb
  },
  data () {
    return {
      crumb: ['页面管理', '新增页面'],
      createNewPageForm: {
        pageName: '',
        projectName: ''
      },
      createNewPageFormRules: {
        pageName: [
          { required: true, message: '请输入新页面名称', trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '请输入所属项目', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetCreateNewPageForm () {
      this.$refs.createNewPageFormRef.resetFields()
    }
  }
}
</script>
